<template>
     <!-- <hooyn-nav-bar
    class="header"
    leftIcon="arrow-left"
    title="园区服务"
    leftIconfont="true"
    fontSize="16px"
    leftIconColor="#fff"
    color="#fff"
    backgroundColor="#68A0F7"
    :returnNav="true"
  />  -->
  <div class="yuanq">
      <van-tabs v-model:active="state.active">
        <van-tab :title="itst" v-for="(itst,index) in state.listits" :key="index">
 <van-list
 v-model:loading="loading"
 :finished="finished"
 finished-text="没有更多了"
 @load="onLoad"
>
<van-cell v-for="(i,t) in state.flistfw" :key="t" @click="lisrout(i.cuid) " :class="i.srvTypeL1.includes(itst)?'':'disnon'" >
  <div class="yaung-item"   @click="lawitem"  >
            <div class="item-left">
              <img :src="i.img" alt="">
            </div>
            <div class="item-right">
              <div class="item-wzi">{{ i.shopName }}</div>
              <div class="xinxin">  <img v-for="is in i.score" :key="is" src="../../assets/xing.png" alt=""> {{i.score}}.0
                <!-- <span>\24.83km</span> -->
              </div>
              <div class="pl"><span v-for="its in i.srvTypeL2" :key="its">{{its}}
              </span></div>
            </div>
          </div>
</van-cell>
</van-list>
         
        </van-tab> 
      </van-tabs>
   </div>
</template>
<script setup>
  import $api from '@/utils/api'
const router = useRouter()
import axios from "axios";
import { Buffer } from "buffer/";
import { Base64 } from 'js-base64'; 
import sha256 from "js-sha256";


const crypto = require("crypto-js");
const getSignature = (msg, key, timestamp, nonce) => {
 console.log(msg,key,timestamp,nonce);
 const sha256Hex1 = sha256Hex(msg);  
   const hmacInput = key + timestamp + nonce + sha256Hex1;  
   const hmac2561 = hmac256(hmacInput, nonce); // 注意：这里的 nonce 应该不是 HMAC 密钥的一部分  
   return hmac2561;  
};
const sha256Hex = (msg) => {
  let lsit = crypto.SHA256(msg).toString(crypto.enc.Hex).toLowerCase()
  return lsit;
};

const hmac256 = (key, msg) => {
  const secretKey = crypto.enc.Utf8.parse(key);
  const msg1 = crypto.enc.Utf8.parse(msg);
  const hash = crypto.HmacSHA256(msg1, secretKey);
  return hash.toString(crypto.enc.Hex).toLowerCase();
};
const getRandomNumber=(min, max) =>{
   return Math.floor(Math.random() * (max - min + 1)) + min;
}
// 示例用法
const msg = "请求报文信息";
const key = "w2cs1PPZazaPCvXw";
const timestamp = Math.floor(Date.now() / 1000);
const nonce = getRandomNumber(1000, 9999);
const start = ref(0); /* 页数，0开始 */
const limit = 20; /* 每页显示数量，默认20 */
const state = reactive({
 active: 0,
 activity:'',
 flistfw:[],
 listits: [],
 index:0,
})
const postData = reactive({
  relObjType: "PARK",
  relObjID:'440306025000',
 start:start.value,
 limit: limit,
});
 const loading = ref(false);
 const finished = ref(false);
 const onLoad = () => {

   const signature = getSignature(JSON.stringify(postData), key, timestamp, nonce);
       let url = "https://baoanqifu.tgovcloud.com/micro/EGB-APP-BOOT/api/park/applet/page4shop";
 axios.post(url,postData,{
     headers: {
       "Timestamp": timestamp,
       "Signature": signature,
       "Nonce": nonce,
       "App-Id": "yljd",
     },
   })
   .then((res) => {
       res.data.data.forEach(item => {
         item.img  = 'https://baoanqifu.tgovcloud.com/micro/EGB-APP-BOOT/api/attachment/download/'+ Base64.encode(item.logoImg)+'?serviceName=MinioAttachService'
         state.flistfw.push(item)
         let arr = []
         if(item.srvType[4].length){
          item.srvType[4].forEach(i => {
            state.listits.push(i.srvType) 
            arr.push(i.srvType)
          })
          item.srvTypeL1 = arr.toString()
          console.log(item.srvTypeL1,arr);
         }
        //  item.srvTypeL2 =item.srvTypeL2.split(",")
         
       })
       state.listits= [...new Set(state.listits)]
       loading.value = false;
   if (finished.value) {
     finished.value = false;
   }
   postData.start++;
   console.log(postData.start)
   if ( res.data.data.length == 20) {
     finished.value = false;
   } else {
     finished.value = true;
   }
   });
  
   };

const lisrout =(item) => {
  wx.miniProgram.navigateTo({ 
    url: '/packages/zoneIndex/zyfw/shop-detail/index?cuid='+item 
     })
}
onMounted(()=>{
  onLoad()
})
</script>
<style lang="scss" scoped>
.disnon{
  display: none !important;
}
.yuanq{
  .listpd{
    height: 6rem;
    line-height: 8rem;
    font-size: 1rem;
  }
    :deep() {
      .van-tabs{

                .van-tabs__nav--line{
          // padding-bottom: 10px;
        }
        .van-tab__text{
          color: #545556;
          font-size: .85rem;
        }
        .van-tab--active{
          .van-tab__text{
          color: #3B3B3B;
        }
        } 
        .van-tabs__nav--line{
          background-color: #FBF9F8;
        }
              .van-tabs__wrap{
              
                height: 40px;
                border-bottom: 1px solid #9c9c9c;
      }
    }
  }
  .van-tab__panel{
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    .yaung-item{
    width: 100%;
  padding:0 0 0.8rem;
  box-sizing: border-box;
  display: flex;
    border-bottom: 1px solid #C8C9CC;
    .item-left{
    margin-right: 0.6rem;
      img{
        width: 6.2rem;
        height: 6.2rem;
      }
    }
    .item-right{
      .item-wzi{
        text-align: left;
        margin-top: 0.2rem;
        font-weight: 400;
        font-size: 1rem;
        color: #3B3B3B;
      }
      .xinxin{
        margin:  .5rem 0;
        position: relative;
        display: flex;
        align-items: center;
        img{
          width: 1rem;
          height: 1rem;
          margin-right: 0.5rem;
        }
        span{
          position: absolute;
          right: 0.6rem;
          line-height: 1.2rem;
          color: orangered;
        }
      }
      .pl{
        text-align: left;
        span{
          display: inline-block;
          font-size: 0.71rem;
          // padding: 0.1rem;
          margin-right: 0.2rem;
          margin-bottom: 0.2rem;
          background-color: #D3DFEF;
          color:#3D87E7 ;
          &:last-child{
            margin-right: 0rem;
          }
        }
      }
    }
  }
  }

  }
.van-cell{
  &::after{
    display: none;
  }
  :deep(){
    .van-cell__value{

    }
  }
}
</style>